<template>
  <div id="pop1">
    <div class="routeHeader">
      <b>路线申请表</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <component v-if="dian" v-bind:is="routeApproval" @changeShow="closeTanc" v-bind="routeData.at(routeChooseIndex)">
    </component>
  </div>
  <el-container>
    <el-header class="auditor_header">
      申请路线审核
    </el-header>

    <el-main>
      <el-table :data="routeData" stripe border style="width: 100%" v-if="exist">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="roadApplyLogsId" label="申请id"/>
        <el-table-column prop="realName" label="申请人"/>
        <el-table-column prop="applyDate" label="申请日期" />
        <el-table-column prop="cargoType" label="大件类型"/>
        <el-table-column prop="passCities" label="途径市区" />
        <el-table-column  label="操作"  >
          <template v-slot:default="scope">
            <el-button  type="primary" @click="detailedInform(scope.row.roadApplyLogsId)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="noData" stripe border style="width: 100%" v-if="!exist">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="roadApplyLogsId" label="申请id"/>
        <el-table-column prop="realName" label="申请人"/>
        <el-table-column prop="applyDate" label="申请日期" />
        <el-table-column prop="cargoType" label="大件类型"/>
        <el-table-column prop="passCities" label="途径市区" />
        <el-table-column  label="操作"  >
          <template v-slot:default="scope">
            <el-button  type="primary" @click="detailedInform(scope.row.roadApplyLogsId)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-config-provider :locale="locale">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="changePage"
            @current-change="changePage"
        />
      </el-config-provider>

    </el-footer>
  </el-container>
<!--模糊背景-->
  <div id="hidebg"></div>
</template>

<script>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import axios from "axios";
import routeApproval from "@/router/auditor/route/routeApproval";
import {ElMessage} from "element-plus";
export default {
  name: "routePage",
  data(){
    return{
      routeApproval,
      showDetail:false,
      total: 0,
      noData:[],
      routeData:[],
      currentPage: 1,
      pageSize: 10,
      locale:zhCn,
      routeChooseIndex:1,
      exist:true,
      dian:false,
    }
  },
  components:{
    routeApproval:routeApproval,
  },
  mounted() {

    this.changePage()
  },
  methods:{
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('pop1') .style.display='none'
      this.dian=false
      this.changePage()
    },
    detailedInform:function (a){
      for(let i=0;i<this.routeData.length;i++){
        if(this.routeData.at(i).roadApplyLogsId===a){
          this.routeChooseIndex=i
        }
      }
      console.log("选择的是"+this.routeChooseIndex)
      console.log(this.routeData.at(this.routeChooseIndex))
      this.dian=true
      var hideobj=document.getElementById("hidebg");
      hideobj.style.display="block";  //显示隐藏层
      //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
      document.getElementById("pop1").style.display="block";  //显示弹出层


    },
    changePage(){
      axios({
        method: 'get',
        url: '/api/audit'+"/"+this.currentPage+"/"+this.pageSize,

      })
          .then((res)=>{
            if(res.data.code==="1"){//返回成功

              this.total=res.data.data.number
              if(this.total===0){
                this.exist=false
              }
              //删除之后翻到前一页
              else if(this.total<=(this.currentPage-1)*10){

                this.currentPage-=1
                this.changePage()
              }
              else{
                this.exist=true
                this.routeData=res.data.data.data
                for(var i=0;i<this.routeData.length;i++){
                  this.routeData[i]['no']=i+1;
                }
              }
            }else{//返回失败
              // alert("出现错误")
              ElMessage.error('出现错误')
              this.$router.push('/login')
            }

          });
    },
  }
}
</script>

<style scoped>


#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color:#000;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
.routeHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
#pop1{
  display: none;
  transform: translate(-50%,-50%);
  height: 590px;
  width: 750px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
  box-sizing: border-box;
}

.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-pagination{
  justify-content: center !important;
}
</style>